import { PayloadAction } from '@reduxjs/toolkit';
import { LayoutTypeEnum } from 'src/interface/theme';
import { State, AntdTheme, MenuTheme, initStates, HeaderTheme } from './initState';

export const setDarkMode = (state: State, action: PayloadAction<boolean>) => {
  state.dark = action.payload;
};

export const setPageCompack = (state: State, action: PayloadAction<boolean>) => {
  state.compack = action.payload;
};

export const setLayoutMode = (state: State, action: PayloadAction<LayoutTypeEnum>) => {
  state.pageTheme.layoutMode = action.payload;
};

export const setThemeConfig = (state: State, action: PayloadAction<Partial<AntdTheme>>) => {
  state.pageTheme.theme = {
    ...state.pageTheme.theme,
    ...action.payload,
  };
};

export const setMenuConfig = (state: State, action: PayloadAction<Partial<MenuTheme>>) => {
  state.pageTheme.menu = {
    ...state.pageTheme.menu,
    ...action.payload,
  };
};

export const setHeaderConfig = (state: State, action: PayloadAction<Partial<HeaderTheme>>) => {
  state.pageTheme.header = {
    ...state.pageTheme.header,
    ...action.payload,
  };
};

export const resetTheme = (state: State) => {
  state.compack = initStates.compack;
  state.dark = initStates.dark;
  state.pageTheme = initStates.pageTheme;
};

export const changeCollapsed = (state: State, action: PayloadAction<boolean>) => {
  state.pageTheme.menu.collapsed = action.payload;
};
